<script setup lang='ts'>
import { onMounted, ref, reactive } from 'vue'

import { useSimulatedOrderPlacing } from '@/stores/SimulatedOrderPlacing'

import { io } from "socket.io-client"
const socket = io('http://localhost:3000')

const SimulatedOrderPlacing = useSimulatedOrderPlacing()

onMounted(async () => {
    await SimulatedOrderPlacing.getList()
})
//表单
const formValue = reactive({
    tableNum: '',//桌号
    classifyList: '',//菜系
    dishInfo: [],//菜品
    totalMoney: '0',//总价格
    peopleNum: '',//总人数
    notes: '',//备注,
})

//选择器
const classifyListChange = (val: string) => {
    SimulatedOrderPlacing.dishesListQuery1 = val
    formValue.dishInfo = []
    formValue.totalMoney = '0'
    SimulatedOrderPlacing.getList()
}
//支付
async function pay() {
    formValue.dishInfo = checkedDish
    await SimulatedOrderPlacing.postOrderSave(formValue)
    // 修改台桌状态
    await SimulatedOrderPlacing.modifyTableState(tableId.value)
    // 支付时提交自定义事件向后台推送数据
    SimulatedOrderPlacing.getList()
    socket.emit('pay', {})
    formValue.tableNum = ''
    formValue.classifyList = ''
    formValue.dishInfo = []
    formValue.totalMoney = '0'
    formValue.peopleNum = ''
    formValue.notes = ''
}
// 选中桌号
let tableId = ref()
const getTableId = (e: any) => {
    tableId.value = SimulatedOrderPlacing.tableList.find(v => {
        return v.number == e
    })
}
// 选中菜品
let checkedDish
const onDishesChange = (val: String) => {
    checkedDish = []
    if (val instanceof Array) {
        for (let i = 0; i < val.length; i++) {
            checkedDish.push(SimulatedOrderPlacing.dishesList.find((v) => { return v.name == val[i] }))
        }
    } else {
        checkedDish = SimulatedOrderPlacing.dishesList.find((v) => { return v.name == val })
    }
    formValue.totalMoney = checkedDish.reduce((t, v) => {
        return t + (v.price * 1)
    }, 0)
}
</script>

<template>
    <el-form :model="formValue" label-width="120px" style="width: 750px;margin:50px auto;">
        <el-form-item label="模拟下单">
            <el-select v-model="formValue.tableNum" class="m-2" placeholder="请输入桌号" @change="getTableId">
                <el-option v-for="item in SimulatedOrderPlacing.tableList" :key="item['_id']" :label="item['number']"
                    :value="item['number']" />
            </el-select>
            <el-select v-model="formValue.classifyList" class="m-2" placeholder="请选择菜系" @change="classifyListChange">
                <el-option v-for="item in SimulatedOrderPlacing.classifyList" :key="item['_id']" :label="item['name']"
                    :value="item['name']" />
            </el-select>
            <el-select v-model="formValue.dishInfo" class="m-2" placeholder="请选择菜品" multiple @change="onDishesChange"
                :disabled="formValue.classifyList === '' || SimulatedOrderPlacing.dishesList.length === 0">
                <el-option v-for="item in SimulatedOrderPlacing.dishesList" :key="item['_id']" :label="item['name']"
                    :value="item['name']" />
            </el-select>
        </el-form-item>
        <el-form-item label="应付金额:">
            {{ formValue.totalMoney }}元
        </el-form-item>
        <el-form-item label="就餐人数">
            <el-input v-model="formValue.peopleNum" class="w-50 m-2" style="width: 100px;" />&nbsp;人
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="formValue.notes" class="w-50 m-2" placeholder="请备注内容" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="pay">立即支付</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped>

</style>